<template>
  <el-row :gutter="20" class="footer_wrapper">
    <el-col :span="12" class="left">
      <el-card>
        <div slot="header" class="header">
          <span>线上学习</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>黄金糕</el-dropdown-item>
              <el-dropdown-item>狮子头</el-dropdown-item>
              <el-dropdown-item>螺蛳粉</el-dropdown-item>
              <el-dropdown-item disabled>双皮奶</el-dropdown-item>
              <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="footer">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <div class="charts" ref="scatter">123</div>
            </el-col>
            <el-col :span="12" :offset="0">
              <div class="charts" ref="leida">456</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
    <el-col :span="12" class="right">
      <el-card>
        <div slot="header" class="header">
          <span> 销售占比 </span>
          <el-radio-group v-model="radio1" size="mini">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="bingtu" ref="bingtu"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      radio1: "",
    };
  },
  mounted() {
    this.sandian();
    this.leida();
    this.bingtu();
  },
  methods: {
    bingtu() {
      var myChart = echarts.init(this.$refs.bingtu);
      let option = {
        title: {
          //主标题
          text: "北京",
          //子标题
          subtext: 300,
          //调整标题位置
          left: "45%",
          top: "45%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
              top:'30px',
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
            //   position: "outside",
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "40",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: true,
            //   position: "",
            },
            data: [
              { value: 1048, name: "北京" },
              { value: 735, name: "上海" },
              { value: 580, name: "广州" },
              { value: 484, name: "深圳" },
              { value: 300, name: "西安" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("mouseover",function (item) {
          //重新设置配置项
          myChart.setOption({
                title:{
                  text:item.data.name,
                  subtext:item.data.value
                }
          })
      });
      window.addEventListener("resize", () => {
        //图标自适应
        myChart.resize();
      });
    },
    leida() {
      var myChart = echarts.init(this.$refs.leida);
      let option = {
        title: {
          //   text: "Basic Radar Chart",
        },

        radar: {
          // shape: 'circle',
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        //图标自适应
        myChart.resize();
      });
    },
    sandian() {
      // 指定图表的配置项和数据
      var myChart = echarts.init(this.$refs.scatter);
      let option = {
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
            type: "scatter",
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        //图标自适应
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.footer_wrapper {
  margin-top: 20px;
  .left {
    .header {
      display: flex;
      justify-content: space-between;
    }
    .footer {
      .charts {
        height: 300px;
      }
    }
  }
  .right {
    .header {
      display: flex;
      justify-content: space-between;
    }
    .bingtu {
      height: 300px;
    }
  }
}
</style>